<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
		<div id="app">
			<div v-if="books.length">	
				<table border="" cellspacing="" cellpadding="">
					<thead>	
						<tr>
							<th></th>
							<th>书籍名称</th>
							<th>出版日期</th>
							<th>价格</th>
							<th>购买数量</th>
							<th>操作</th>
						</tr>
					</thead>
						<tbody>
							<tr v-for="(item,index) in books">
								<!-- <td v-for="value in item">{{value}}</td> -->
								<td>{{item.id}}</td>
								<td>{{item.name}}</td>
								<td>{{item.date}}</td>
								<!-- <td>{{getfinalPrice(item.price)}} --></td>
								<td>{{item.price|showPrice}}
								<td>
									<button type="button" @click="decrement(index)":disabled="item.count<=1">-</button>
									{{item.count}}
									<button type="button" @click="increment(index)">+</button>
								</td>
								<td><button type="button" @click="removeHandle(index)">移除</button></td>
							</tr>
						</tbody>
						
				</table>
				<h2>总价格：{{totalPrice|showPrice}}</h2>
			</div>	
			<h2 v-else >购物车为空 </h2>
		</div>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="main.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
